<template>
  <div>
    <div class="main-content">
      <div class="total-wrap">
        <div class="card-double" v-if="incomeInfo">
          <div class="card-point">
            <span class="card-title">总收入</span>
            <div class="card-num-wrap"
              ><span class="unline">{{ incomeInfo.actual }} </span>
              <span class="card-unit">万元</span>
            </div>
          </div>
          <div class="card-remark">
            <span class="card-budget">预算：{{ incomeInfo.budgetDiff }}, </span>
            <svg width="10" height="10">
              <polygon :points="getTrianglePoint(incomeInfo.budgetDiff > 0)" :style="{ fill: getColor(incomeInfo.budgetDiff > 0) }" />
            </svg>
            <span
              :style="{
                color: getColor(incomeInfo.budgetDiff > 0),
              }"
            >
              {{ incomeInfo.budgetDiffPercent }}</span
            >
            <span class="info-dash-line"></span>
            <span
              >去年：{{ incomeInfo.lastYearDiff }},
              <svg width="10" height="10">
                <polygon
                  :points="getTrianglePoint(incomeInfo.lastYearDiff > 0)"
                  :style="{
                    fill: getColor(incomeInfo.lastYearDiff > 0),
                  }"
                />
              </svg>
              <span
                :style="{
                  color: getColor(incomeInfo.lastYearDiff > 0),
                }"
              >
                {{ incomeInfo.lastYearDiffPercent }}</span
              ></span
            >
          </div>
        </div>
        <div class="card-solid-line"></div>
        <div class="card-double" v-if="profitInfo">
          <div class="card-point">
            <span class="card-title">经营利润</span>
            <div class="card-num-wrap"
              ><span class="unline">{{ profitInfo.actual }} </span>
              <span class="card-unit">万元</span>
            </div>
          </div>
          <div class="card-remark">
            <span class="card-budget">预算：{{ profitInfo.budgetDiff }}, </span>
            <svg width="10" height="10">
              <polygon :points="getTrianglePoint(profitInfo.budgetDiff > 0)" :style="{ fill: getColor(profitInfo.budgetDiff > 0) }" />
            </svg>
            <span
              :style="{
                color: getColor(profitInfo.budgetDiff > 0),
              }"
            >
              {{ profitInfo.budgetDiffPercent }}</span
            >
            <!-- <br /> -->
            <span class="info-dash-line"></span>
            <span
              >去年：{{ profitInfo.lastYearDiff }},
              <svg width="10" height="10">
                <polygon
                  :points="getTrianglePoint(profitInfo.lastYearDiff > 0)"
                  :style="{
                    fill: getColor(profitInfo.lastYearDiff > 0),
                  }"
                />
              </svg>
              <span
                :style="{
                  color: getColor(profitInfo.lastYearDiff > 0),
                }"
              >
                {{ profitInfo.lastYearDiffPercent }}</span
              ></span
            >
          </div>
        </div>
      </div>
      <a-row :gutter="12" style="margin-bottom: 10px">
        <a-col :span="6"
          ><div class="title-name">用餐人数（<span class="title-name-unit">人</span>）</div></a-col
        >
        <a-col :span="6"
          ><div class="title-name">人均食品消费（<span class="title-name-unit">元</span>）</div></a-col
        >
        <a-col :span="6"
          ><div class="title-name">人均食品成本（<span class="title-name-unit">元</span>）</div></a-col
        >
        <a-col :span="6"><div class="title-name">食品成本率</div></a-col>
      </a-row>
      <!-- <a-row>
        <a-col :span="8">
          <FlexCard :title="`${currentRestTypeName}收入`" :loading="loading">
            <BarSingleImg v-if="incomeData.length > 0" :dataList="incomeData" unit="万元" />
          </FlexCard>
        </a-col>
        <a-col :span="8">
          <FlexCard :title="`${currentRestTypeName}利润`" :loading="loading">
            <BarSingleImg v-if="profitData.length > 0" :dataList="profitData" unit="万元" />
          </FlexCard>
        </a-col>
        <a-col :span="8">
          <FlexCard :title="`${currentRestTypeName}利润率`" :loading="loading">
            <RingImg v-if="gopRateData.length > 0" :dataList="gopRateData" />
          </FlexCard>
        </a-col>
      </a-row> -->
      <a-row :gutter="12">
        <a-col :span="6">
          <!-- 用餐人数 -->
          <FlexCard title="" :loading="loading">
            <BarSingleLittleGrid
              v-if="dinersData.length > 0"
              :barWidth="30"
              :dataList="dinersData"
              unit="人"
              showComment="false"
              :height="'200px'"
              formatter="dot2Formatter|0"
            />
          </FlexCard>
        </a-col>
        <a-col :span="6">
          <!-- 食品人均消费 -->
          <FlexCard title="" :loading="loading">
            <BarSingleLittleGrid
              v-if="consumData.length > 0"
              :barWidth="30"
              :dataList="consumData"
              unit="元"
              showComment="false"
              :height="'200px'"
              formatter="dot2Formatter|0"
            />
          </FlexCard>
        </a-col>
        <a-col :span="6">
          <!-- 食品人均成本 -->
          <FlexCard title="" :loading="loading">
            <BarSingleLittleGrid
              v-if="foodData.length > 0"
              :barWidth="30"
              :dataList="foodData"
              unit="元"
              showComment="false"
              :height="'200px'"
              formatter="dot2Formatter|0"
            />
          </FlexCard>
        </a-col>
        <a-col :span="6">
          <!-- 食品成本率 -->
          <FlexCard title="" :loading="loading">
            <RingImg v-if="foodRateData.length > 0" :dataList="foodRateData" />
          </FlexCard>
        </a-col>
      </a-row>
      <!-- <ReportRemarkCard :loading="loading" v-if="reportCode" title="说明" :reportCode="reportCode" :reportName="reportName" /> -->
    </div>
  </div>
</template>
<script>
  import { defHttp } from '/@/utils/http/axios';

  import * as Color from '/@/utils/ColorDefault';
  import * as MathUtil from '/@/utils/MathUtil';
  import FlexCard from '@/views/applications/ui/FlexCard.vue';
  // import ReportRemarkCard from '@/views/applications/ui/ReportRemarkCard.vue';
  import RingImg from '@/views/applications/ui/RingImg.vue';
  // import BarSingleImg from '@/views/applications/ui/BarSingleImg.vue';
  import BarSingleLittleGrid from '@/views/applications/ui/BarSingleImgGrid.vue';

  const REPORT_NAME = '酒店月度餐厅概况（项目）';
  const REPORT_CODE = 'hotel-month-single-droom';
  const APIS = {
    admonth: 'getHotelMonthReportAdRest',
    adyear: 'getHotelMonthReportAccAdRest',
    cnmonth: 'getHotelMonthReportCnRest',
    cnyear: 'getHotelMonthReportAccCnRest',
    spmonth: 'getHotelMonthReportSpRest',
    spyear: 'getHotelMonthReportAccSpRest',
    bamonth: 'getHotelMonthReportBaRest',
    bayear: 'getHotelMonthReportAccBaRest',
  };

  export default {
    name: REPORT_NAME,

    components: {
      FlexCard,
      // ReportRemarkCard,
      // BarSingleImg,
      RingImg,
      BarSingleLittleGrid,
    },

    props: {
      hotelList: {
        type: Array,
        default: () => [
          {
            name: '',
            value: '',
          },
        ],
      },
      currentHotel: {
        type: Object,
        default: () => ({
          name: '',
          code: '',
        }),
      },
      lastMonth: {
        type: String,
        default: '',
      },
      currentAcc: {
        type: String,
        default: 'month',
      },
      currentRestType: {
        type: String,
        default: 'ad',
      },
    },

    data() {
      return {
        title: '餐饮部分-全日餐厅',
        reportCode: '',
        reportName: '',
        loading: false,
        tableHigh: { x: '100%', y: 308 },
        accList: [
          { label: '当月', value: 'month' },
          { label: '当年', value: 'year' },
        ],
        typeList: [
          { label: '全日餐厅', value: 'ad' },
          { label: '中餐厅', value: 'cn' },
          { label: '特色餐厅', value: 'sp' },
          { label: '宴会', value: 'ba' },
        ],
        currentRestTypeName: '全日餐厅',
        incomeData: [],
        incomeInfo: {},
        profitData: [],
        gopRateData: [],
        dinersData: [],
        consumData: [],
        foodData: [],
        foodRateData: [],
      };
    },

    watch: {
      currentHotel: {
        handler(val) {
          if (val && val.code) {
            this.fetchData();
          }
        },
        deep: true,
      },
      lastMonth() {
        this.fetchData();
      },
      currentAcc() {
        this.fetchData();
      },
      currentRestType() {
        this.fetchData();
      },
    },

    created() {
      // if (this.currentHotel.code) {
      //   this.fetchData();
      // }
    },

    methods: {
      fetchData() {
        this.loading = true;
        defHttp
          .post({
            url: '/data/query',
            data: {
              labelCode: APIS[`${this.currentRestType}${this.currentAcc}`],
              sqlParams: [
                { key: 'code', value: this.currentHotel.code },
                { key: 'month', value: this.lastMonth },
              ],
              pageIndex: 1,
              pageSize: 100,
            },
          })
          .then((res) => {
            const dataList = res.datas.success ? res.datas.data : [];
            console.log('dataList', dataList);
            const data = dataList[0];
            if (dataList.length === 0) {
              this.clearAllData();
            } else {
              this.incomeInfo = {
                actual: MathUtil.currencyWNFormatter(data.income, 0),
                budgetDiff: MathUtil.currencyWNFormatter(data.incomeBudget, 0),
                budgetDiffPercent: MathUtil.diffPercent2Formatter(data.income, data.incomeBudget, 1),
                lastYearDiff: MathUtil.currencyWNFormatter(data.lIncome, 0),
                lastYearDiffPercent: MathUtil.diffPercent2Formatter(data.income, data.lIncome, 1),
              };
              this.profitInfo = {
                actual: MathUtil.currencyWNFormatter(data.profit, 0),
                budgetDiff: MathUtil.currencyWNFormatter(data.profitBudget, 0),
                budgetDiffPercent: MathUtil.diffPercent2Formatter(data.profit, data.profitBudget, 1),
                lastYearDiff: MathUtil.currencyWNFormatter(data.lProfit, 0),
                lastYearDiffPercent: MathUtil.diffPercent2Formatter(data.profit, data.lProfit, 1),
              };
              this.incomeData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: data.income,
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '预算',
                  value: data.incomeBudget,
                  color: Color.COLOR_PURPLE,
                },
                {
                  name: '去年',
                  value: data.lIncome,
                  color: Color.COLOR_WARN,
                },
              ];
              this.profitData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: data.profit,
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '预算',
                  value: data.profitBudget,
                  color: Color.COLOR_PURPLE,
                },
                {
                  name: '去年',
                  value: data.lProfit,
                  color: Color.COLOR_WARN,
                },
              ];
              this.gopRateData = [
                {
                  name: '去年',
                  value: MathUtil.safeDivide(data.lProfit, data.lIncome),
                  color: Color.COLOR_WARN,
                },
                {
                  name: '预算',
                  value: MathUtil.safeDivide(data.profitBudget, data.incomeBudget),
                  color: Color.COLOR_PURPLE,
                },
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: MathUtil.safeDivide(data.profit, data.income),
                  color: Color.COLOR_BLUE,
                },
              ];
              this.dinersData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: data.dinners,
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '预算',
                  value: data.dinnersBudget,
                  color: Color.COLOR_PURPLE,
                },
                {
                  name: '去年',
                  value: data.lDinners,
                  color: Color.COLOR_WARN,
                },
              ];
              this.consumData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: MathUtil.safeDivide(data.foodIncome, data.dinners),
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '预算',
                  value: MathUtil.safeDivide(data.foodIncomeBudget, data.dinnersBudget),
                  color: Color.COLOR_PURPLE,
                },
                {
                  name: '去年',
                  value: MathUtil.safeDivide(data.lFoodIncome, data.lDinners),
                  color: Color.COLOR_WARN,
                },
              ];
              this.foodData = [
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: MathUtil.safeDivide(data.foodCost, data.dinners),
                  color: Color.COLOR_BLUE,
                },
                {
                  name: '预算',
                  value: MathUtil.safeDivide(data.foodCostBudget, data.dinnersBudget),
                  color: Color.COLOR_PURPLE,
                },
                {
                  name: '去年',
                  value: MathUtil.safeDivide(data.lFoodCost, data.lDinners),
                  color: Color.COLOR_WARN,
                },
              ];
              this.foodRateData = [
                {
                  name: '去年',
                  value: MathUtil.safeDivide(data.lFoodCost, data.lFoodIncome),
                  color: Color.COLOR_WARN,
                },
                {
                  name: '预算',
                  value: MathUtil.safeDivide(data.foodCostBudget, data.foodIncomeBudget),
                  color: Color.COLOR_PURPLE,
                },
                {
                  name: this.currentAcc === 'month' ? '实际' : '年累计',
                  value: MathUtil.safeDivide(data.foodCost, data.foodIncome),
                  color: Color.COLOR_BLUE,
                },
              ];
            }
            const accName = this.accList.filter((a) => a.value === this.currentAcc)[0].label;
            this.reportCode = `${REPORT_CODE}-${this.currentAcc}-${this.currentHotel.code}-${this.lastMonth}-${this.currentRestType}`;
            this.reportName = `${REPORT_NAME}-${accName}-${this.currentHotel.name}-${this.lastMonth}-${this.currentRestTypeName}`;
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      },

      clearAllData() {
        this.incomeData = [];
        this.profitData = [];
        this.gopRateData = [];
        this.dinersData = [];
        this.consumData = [];
        this.foodData = [];
        this.foodRateData = [];
        this.incomeInfo = null;
        this.profitInfo = null;
      },

      getDataByCode(dataList, code) {
        return (
          dataList.find((item) => item.subjectCode === code) || {
            actual: 0,
            budget: 0,
            lActual: 0,
          }
        );
      },
      getTrianglePoint(isUp) {
        return isUp ? '5,0 0,10 10,10' : '0,0 10,0 5,10';
      },

      getColor(rise = true) {
        return rise ? Color.COLOR_GREEN : Color.COLOR_RED;
      },
    },
  };
</script>

<style lang="less" scoped>
  .total-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 0.55rem;
    padding: 2px 10px;
    margin-bottom: 10px;
  }
  .main-content {
    padding: 12px 0;

    &-title {
      &-custom {
        color: #00b578;
      }
    }
  }

  .card-double {
    display: flex;
    justify-content: space-between;

    &-item {
      flex-basis: 48%;
    }
  }

  .card-point {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
  }
  .card-remark {
    font-size: 12px;
    display: flex;
    align-items: center;
    // text-align: right;
    margin-left: 10px;
  }
  .card-title {
    margin-right: 10px;
  }
  .card-num-wrap {
    display: flex;
    align-items: center;
  }
  .card-unit {
    font-size: 12px;
    padding-left: 5px;
  }
  .card-budget {
    padding-right: 5px;
  }
  .interval-area {
    margin-bottom: 12px;
  }
  .dash-line {
    border-left: 1px dashed #d9d9d9;
  }
  .title-name {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    background: #ffffff;
    -webkit-box-shadow: 0px 5px 5px 0px rgba(25, 15, 15, 0.07);
    box-shadow: 0px 5px 5px 0px rgba(25, 15, 15, 0.07);
    border-radius: 0.5rem;
    font-size: 16px;
    font-weight: 600;
    .title-name-unit {
      font-weight: 400;
    }
  }
  .select-title-space {
    margin-right: 20px;
    width: 200px;
  }

  ::v-deep .select-title .van-cell {
    color: hsl(217, 16%, 60%);
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: unset;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    background-color: #112c4d;
  }

  .popup-right {
    width: auto;

    &-content {
      height: 800px;
      width: 318px;

      &-oprate {
        display: flex;
        padding: 16px;
        justify-content: center;

        &-item {
          width: 100%;
          margin-right: 10px;
        }

        &-item:last-child {
          margin-right: 0;
        }
      }
    }
  }

  @media @desktop {
    .main-frame-desktop-header {
      padding: 1rem;
      background: #fff;
      overflow: hidden;
    }


    .echarts {
      width: 100%;
      height: 300px;
    }
    .flex-height {
      height: 489px;
    }
    .unline {
      // font-size: 16px;s
      // text-decoration: underline;
    }
    .card-intitle {
      font-size: 14px;
      font-weight: 600;
      text-align: center;
    }
    .card-top {
      text-align: center;
      margin-bottom: 12px;
    }
    .card-flex {
      display: flex;
      justify-content: space-between;
      gap: 20px;
    }
    .card-left {
      display: flex;
      justify-content: space-between;
      gap: 4px;
    }
    .card-img {
      padding: 12px;
      border-radius: 10px;
      background-color: #f7f5f4;
    }
    .dash-line {
      border-left: 1px dashed #d9d9d9;
    }
  }
  .info-dash-line {
    border-left: 1px dashed rgba(0, 0, 0, 0.5);
    // width: 1px;
    height: 19px;
    margin: 0 5px;
  }
  .card-solid-line {
    border-left: 1px solid rgba(0, 0, 0, 0.5);
    // width: 1px;
    height: 19px;
    margin: 0 25px;
  }
</style>
